import React from 'react';
import * as CONST from 'common/const';
import css from './index.less';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import PageContentRender from 'components/pageContentRender';
import { observer } from 'mobx-react';

@observer
export default class SliderPageThumb extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
    maxWidth: PropTypes.number,
    className: PropTypes.string,
  };

  static defaultProps = {
    maxWidth: 180,
  };

  render() {
    const { mod, className, maxWidth } = this.props;
    let height = mod.height > CONST.PAGE_HEIGHT ? CONST.PAGE_HEIGHT : mod.height;
    let width = mod.width > maxWidth ? maxWidth : mod.width;
    let scale = width / mod.width;
    height = Math.floor(scale * height);

    const props = {
      className: classnames(css.pageThumb, className),
      style: {
        width,
        height,
        overflow: 'hidden'
      },
    };

    const innerProps = {
      className: css.inner,
      style: {
        ...mod.style,
        transform: `scale(${scale})`,
      }
    };

    const pageContentProps = {
      mod,
      isThumb: true,
    };

    return (
      <div {...props}>
        <div {...innerProps}>
          <PageContentRender {...pageContentProps} />
        </div>
      </div>
    );
  }
}
